<template>
    <div class="box-column">
        <ux-header-search ref="searchHeader" v-bind="enquiryData" :isCheckPermissions="false"
            @search="onQueryClick"></ux-header-search>
        <div class="box-flex1 table">
            <vxe-grid v-bind="tableConfig" :data="dataStore.data" :columns="table.columns">
                <template v-slot:operate="{ row }">
                    <ux-btn-group :btns="table.btns" :data="{ row, permissionsData }"></ux-btn-group>
                </template>
            </vxe-grid>
        </div>
        <div class="pagination-el box-row box-center-end">
            <el-pagination @size-change="onSizeChange" @current-change="onCurrentChange"
                :current-page="dataStore.proxy.page" :page-size="dataStore.proxy.pageSize" :page-sizes="dataStore.pageSizes"
                :total="dataStore.pagination.total" :layout="'total, sizes, prev, pager, next, jumper'"></el-pagination>
        </div>
    </div>
</template>

<script  lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Action, Getter } from "vuex-class";
import { mixinTableStore } from "@/mixin/table/Store";
import { mixinTableHeader } from "@/mixin/table/Header";
import { mixinTime } from "@/mixin/Time";
import moment from 'moment';
@Component({
    mixins: [mixinTableStore, mixinTableHeader, mixinTime]
})
export default class parkTenantLogTable extends Vue {
    @Action("kqLog/originalList") getList: any;
    table: any = {
        // 列配置
        columns: [
            {
                width: 70,
                type: "seq",
                title: "序号"
            },
            {
                title: "姓名",
                field: "staff_xm"
            },
            {
                title: "部门",
                field: "section_name"
            },
            {
                title: "岗位",
                field: "staff_post"
            },
            {
                title: "日期",
                field: "dk_day"
            },
            {
                title: "班次",
                field: "dk_times",
                formatter: function ({ cellValue }) {
                    return ['', '早班上班卡', '早班下班卡', '中班上班卡', '中班下班卡', '晚班上班卡', '晚班下班卡'][cellValue];

                }
            },
            {
                title: "班次班时间",
                field: "work_time"
            },
            {
                title: "打卡时间",
                field: "dk_time"
            },
            {
                title: "考勤结果",
                field: "late_minute",
                formatter: function ({ cellValue }) {
                    if (cellValue === 0) {
                        return '正常';
                    }
                    if (cellValue > 0) {
                        return '迟到' + cellValue + '分钟';
                    }
                    if (cellValue < 0) {
                        return '早退' + Math.abs(cellValue) + '分钟';
                    }
                }
            },
            {
                title: "打卡方式",
                field: "dk_way",
                params: 'scripTypeData',
                formatter: (this as any).formatterData
            },
            {
                title: "门禁名称",
                field: "door_name"
            }
        ]
    };

    @Getter("sharing/openType") typeData: any;
    scripTypeData: any = [];
    mounted() {
        this.scripTypeData = this.typeData.filter((item) => item.item_value != 99);
    }

    // 查询头下拉数据配置
    headerSelectList: any = [
        {
            dataName: "scripTypeData",
            keyName: "dk_way"
        }
    ];

    // 查询头配置
    enquiryData: any = {
        fields: [
            {
                field: 'section_name',
                label: '部门'
            },
            {
                field: 'user_xm',
                label: '姓名'
            },
            {
                fieldType: 'daterange',
                field: 'time',
                label: '日期范围',
                type: 'daterange',
                format: 'yyyy-MM-dd',
                pickerOptions: {
                    disabledDate: (time: any) => {
                        const date = time.getTime();
                        return !(
                            date < moment().subtract(0, 'day') &&
                            date > moment().subtract(+12, 'months')
                        );
                    }
                }
            },
            {
                fieldType: "select",
                field: "dk_way",
                label: "打卡方式"
            }
        ],
        valueTransform: [
            {
                field: "time",
                // 对应DatePicker时间范围组件
                fields: ["start_time", "end_time"]
            }
        ]
    };
    timeOptionRange: any = null;
}
</script>

